<?php

/* @var $this yii\web\View */
use yii\helpers\Html;

?>

<style>
    /**{margin:0;padding:0;list-style:none;}*/
    /*body{font-size:12px;color:#666;text-align:left;}*/
    h1{text-align:center;}

    .tabbox{width:1140px;min-height:500px;margin:100px auto;font-family:'微软雅黑';}
    .tabbox .tab{overflow:hidden;}
    .tabbox .tab a{display:block;padding:10px 20px;float:left;text-decoration:none;color:#333;}
    .tabbox .tab a:hover{text-decoration:none;}
    .tabbox .tab a.on{text-decoration:none;}

    .tabbox .content{overflow-x: hidden; width:1140px;min-height: 605px;position:relative;}
    .tabbox .content ul{position:absolute;left:0;top:0;min-height:500px;}
    .tabbox .content li{width:1140px;min-height:500px;float:left;}
</style>

<!-- 代码部分begin -->
<div class="tabbox">
    <div class="tab">
        <?
        foreach ($typedata as $k=>$v){?>
         <a href="javascript:;"><?= $v['value'] ?></a> 
        <?}?>

    </div>
    <div class="content">
        <ul>
            <?
            foreach ($typedata as $tk=>$tv){$br = 1;?>
                <li>
                    <?
                    foreach($imgmodel as $k =>$v) {
                        if ($v['type'] == $tv['id']){

                            echo  Html::a(Html::img(Yii::$app->request->hostInfo . '\\' . $v['url'],
                                ['width'=>375,'height'=>300]),
                                \yii\helpers\Url::to(['site/info', 'id' => $v['id']]),['style'=>'margin-right:5px']);
                            if ($br%3==0){
                                echo "<div style='margin-bottom: 5px'></div>";
                                $br = 1;
                            }else
                                $br++;


                         }

                    }
                    ?>
                </li>
            <?}?>
        </ul>
    </div>
</div>



<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
    $(function(){
        $('.tabbox .content ul').width(1140*$('.tabbox .content li').length+'px');
        $(".tabbox .tab a").mousedown(function(){
            $(this).addClass('on').siblings().removeClass('on');
            var index = $(this).index();
            number = index;
            var distance = -1140*index;
            $('.tabbox .content ul').stop().animate({
                left:distance
            });
        });

        var auto = 11;  //等于1则自动切换，其他任意数字则不自动切换
        if(auto ==1){
            var number = 0;
            var maxNumber = $('.tabbox .tab a').length;
            function autotab(){
                number++;
                number == maxNumber? number = 0 : number;
                $('.tabbox .tab a:eq('+number+')').addClass('on').siblings().removeClass('on');
                var distance = -1140*number;
                $('.tabbox .content ul').stop().animate({
                    left:distance
                });
            }
            var tabChange = setInterval(autotab,3000);
            //鼠标悬停暂停切换
            $('.tabbox').mouseover(function(){
                clearInterval(tabChange);
            });
            $('.tabbox').mouseout(function(){
                tabChange = setInterval(autotab,3000);
            });
        }
    });
</script>
<!-- 代码部分end -->